<template>
  <div class="app-content-body fade-in-up ng-scope">
    <div class="fade-in ng-scope">
      <div class="bg-light lter b-b wrapper-md ng-scope" id="table-page-title">
        <h1 class="m-n font-thin h3">密码修改</h1>
      </div>
      <div class="wrapper-md ng-scope form-horizontal">
        <div class="panel panel-default">
          <div class="panel-heading"><strong>您的基本信息</strong></div>
          <div class="panel-body">
            <el-form :model="passwordInfo" :rules="rules" label-width="100px" ref="passwordInfo">
              <div class="col-sm-4">
                <el-form-item label="旧密码" prop="oldPassword">
                  <el-input type="password" v-model="passwordInfo.oldPassword"></el-input>
                </el-form-item>
              </div>

              <div class="line line-dashed line-xs pull-in"></div>
              <div class="col-sm-4">
                <el-form-item label="新密码" prop="newPassword">
                  <el-input type="password" v-model="passwordInfo.newPassword"></el-input>
                </el-form-item>
              </div>
              <div class="line line-dashed line-xs pull-in"></div>
              <div class="col-sm-4">
                <el-form-item label="确认密码" prop="checkPassword">
                  <el-input type="password" v-model="passwordInfo.checkPassword"></el-input>
                </el-form-item>
              </div>
              <div style="clear: both"></div>
              <footer class="panel-footer text-right bg-light lter">
                <div style="float: left;">
                  <span class="badge bg-danger text-base textTs"></span>
                </div>
                <el-button type="primary" :loading="ifSub" @click="submitForm()">提交修改</el-button>
              </footer>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

  import Vue from 'vue'
  import {SERVICE_URLS} from '../../../../config/service.url'

  export default{
    data(){
      const validatePass = (rule, value, callback) => {
        //异步密码验证
        Vue.http.post(SERVICE_URLS.user.checkPassword.path, this.passwordInfo).then(data => {
          if (data.code == 0) {
            callback();
          } else {
            if (data.message == "error") {
              callback(new Error("旧密码错误，请确认！"))
            } else {
              this.$message.error({
                showClose: true,
                message: data.message
              })
              callback(new Error(data.message));
            }
          }
        }).catch(err => {
            this.$message.error({
              showClose: true,
              message: err.message
            })
            callback(new Error(err.message));
          }
        )
      };
      const validatePass2 = (rule, value, callback) => {
        if (value !== this.passwordInfo.newPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        passwordInfo: {
          oldPassword: "",
          newPassword: "",
          checkPassword: ""
        },
        ifSub: false,
        rules: {
          oldPassword: [
            {required: true, message: '请输入旧密码', triggers: ['blur', 'change']},
            {min: 6, max: 20, message: '长度在 6 到 20 个字符', triggers: ['blur', 'change']},
            {validator: validatePass, trigger: 'blur'}
          ],
          newPassword: [
            {required: true, message: '请输入新密码', triggers: ['blur', 'change']},
            {min: 6, max: 50, message: '长度在 6 到 20 个字符', triggers: ['blur', 'change']}
          ],
          checkPassword: [
            {required: true, message: '请输入确认密码', triggers: ['blur', 'change']},
            {min: 6, max: 20, message: '长度在 6 到 20 个字符', triggers: ['blur', 'change']},
            {validator: validatePass2, triggers: ['blur', 'change']}
          ]
        }
      }
    },
    methods: {
      submitForm() {
        const self = this;
        Vue.submit(self, {
          formName: 'passwordInfo',
          url: SERVICE_URLS.user.password,
          data: this.passwordInfo
        }, Vue);
      }
    }
  }
</script>
